<template>
    <div :class="{
        outline: true,
        'active-outline': id === editorStore.currentComponentId,
        }" @click="editorStore.setCurrentComponentId(id)"><slot /></div>
</template>

<script setup lang="ts">
import useEditorStore from '@/store/modules/editor';
import { componentInstall } from '@/materials';
defineOptions({
    name: "Wrapper",
});
defineProps({
    id: {
        type: String,
        required: true
    }
})
const editorStore = useEditorStore();

const handleClick = async () => {
  //editorStore.setCurrentComponentId(props.id)
 // await componentInstall(config, 'config.vue');
  
}
</script>

<style lang="scss" scoped>
.outline {
  display: inline-block;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-radius: 4px;
  &:hover {
    border-style: dashed;
    border-color: #197aff;
  }
  &.active-outline {
    margin: -1px;
    border-width: 2px;
    border-style: solid;
    border-color: #197aff;
  }  
}


</style>